<template>
    <div class="info-container"
         :style="{ background: `linear-gradient(326deg, ${fromColor} 8%, ${toColor} 100%)` }">
        <div class="circle small-circle"></div>
        <div class="circle middle-circle"></div>
        <div class="circle large-circle"></div>

        <img :src="icon" title="icon" />

        <div class="desc">{{ desc }}</div>
        <div class="numbers">{{ num }}</div>
    </div>
</template>

<script>
    export default {
        name: 'DetailInfo',
        props: {
            desc: String,
            num: Number,
            icon: String,
            fromColor: String,
            toColor: String,
        },
    };
</script>

<style lang="scss" scoped>
    div.info-container {
        position: relative;
        float: left;
        margin-right: 4%;
        margin-bottom: 4%;
        padding-left: 36px;
        width: 22%;
        height: 210px;
        color: #FFF;
        border-radius: 36px;
        overflow: hidden;

        &:nth-of-type(4n) {
            margin-right: 0;
        }

        & > .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .05);
            border-radius: 50%;

            &.small-circle {
                z-index: 3;
                top: -80%;
                left: -50%;
            }

            &.middle-circle {
                z-index: 2;
                top: -60%;
                left: -50%;
            }

            &.large-circle {
                z-index: 1;
                top: -50%;
                left: -40%;
            }
        }

        & > img {
            position: absolute;
            z-index: 1;
            right: -20px;
            bottom: -40px;
        }

        & > div.desc {
            margin: 30px 0 10px 0;
            font-size: 20px;
            font-weight: 500;
            cursor: default;
        }

        & > div.numbers {
            font-size: 80px;
            font-weight: 700;
            text-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
            cursor: default;
        }
    }
</style>
